<template>
  <div id="wxs-menus">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item">微信公众号</li>
        <li class="breadcrumb-item active" aria-current="page">自定义菜单</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <div class="card col-12 mt-4 px-0">
      <template v-if="!editing">
        <div class="card-header">
          <button
            type="button"
            class="btn btn-sm btn-primary"
            @click.stop="newMenu()"
          >
            新建
          </button>
          <button
            type="button"
            class="btn btn-sm btn-danger ms-5"
            @click.stop="upload()"
          >
            上传
          </button>
        </div>
        <table class="table table-sm table-striped table-condensive">
          <thead>
            <tr>
              <th>层级</th>
              <th>名称</th>
              <th>类型</th>
              <th>URL</th>
              <th>Key</th>
              <th></th>
              <th>创建时间</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(info, index) in dataList">
              <template v-if="info.level === 1">
                <tr>
                  <td>{{ info.level }}</td>
                  <td>{{ info.name }}</td>
                  <td>{{ info.type }}</td>
                  <td>{{ info.url }}</td>
                  <td>{{ info.key }}</td>
                  <td>
                    <button
                      class="btn btn-sm btn-info"
                      @click.stop="copyMenu(index)"
                    >
                      复制
                    </button>
                    <button
                      class="btn btn-sm btn-info-outline"
                      @click.stop="createSubMenu(index)"
                    >
                      增加子菜单
                    </button>
                  </td>
                  <td>{{ formatDateTime(info.createTime) }}</td>
                  <td>
                    <button
                      class="btn btn-sm btn-danger"
                      @click.stop="deleteMenu(info.id)"
                    >
                      删除
                    </button>
                  </td>
                </tr>
                <template v-for="(info2, index2) in dataList">
                  <tr v-if="info2.level === 2 && info2.parentId === info.id">
                    <td>{{ info2.level }}</td>
                    <td>{{ info2.name }}</td>
                    <td>{{ info2.type }}</td>
                    <td>{{ info2.url }}</td>
                    <td>{{ info2.key }}</td>
                    <td>
                      <button
                        class="btn btn-sm btn-info"
                        @click.stop="copyMenu(index2)"
                      >
                        复制
                      </button>
                    </td>
                    <td>{{ formatDateTime(info2.createTime) }}</td>
                    <td>
                      <button
                        class="btn btn-sm btn-secondary"
                        @click.stop="deleteMenu(info2.id)"
                      >
                        删除
                      </button>
                    </td>
                  </tr>
                </template>
              </template>
            </template>
          </tbody>
        </table>
      </template>
      <template v-else>
        <div class="card-body">
          <div class="row mb-2">
            <label class="col-2 text-end">名称</label>
            <div class="col-10">
              <input class="form-control" v-model="name" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">次序值</label>
            <div class="col-10">
              <input class="form-control" v-model="orderNum" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">层级</label>
            <div class="col-10">
              <input class="form-control" v-model="level" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">上级ID</label>
            <div class="col-10">
              <input class="form-control" v-model="parentId" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">类型</label>
            <div class="col-8">
              <select class="form-select" v-model="type">
                <option value="">无</option>
                <option value="view">视图</option>
                <option value="click">按钮</option>
              </select>
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">URL</label>
            <div class="col-10">
              <input class="form-control" v-model="url" />
            </div>
          </div>
          <div class="row mb-2">
            <label class="col-2 text-end">Key</label>
            <div class="col-10">
              <input class="form-control" v-model="key" />
            </div>
          </div>
        </div>
        <div class="card-body text-center">
          <button class="btn btn-success " @click.stop="createMenu()">
            保存
          </button>
          <button
            class="btn btn-danger-outline "
            @click.stop="reset()"
          >
            取消
          </button>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {
  searchCustomMenus,
  deleteCustomMenu,
  createCustomMenu,
  uploadCustomMenu,
} from "@/api/wxs.js";
import { convertLongToTimeDesc } from "@/common/common.js";

export default {
  data() {
    return {
      dataList: [],
      name: "",
      orderNum: 0,
      level: 1,
      parentId: 0,
      type: "",
      url: "",
      key: "",
      editing: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      this.showLoading();

      searchCustomMenus(
        (jsonResult) => {
          this.dataList = jsonResult.dataList;
        },
        () => this.hideLoading()
      );
    },
    deleteMenu: function (id) {
      this.showLoading();

      deleteCustomMenu(
        id,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("已删除");
            this.search();
          } else {
            this.showErrMsg("删除不成功", "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    createMenu: function () {
      this.showLoading();

      var params = {
        name: this.name,
        orderNum: this.orderNum,
        type: this.type,
        level: this.level,
        parentId: this.parentId,
        url: this.url,
        key: this.key,
      };

      createCustomMenu(
        params,
        (jsonResult) => {
          if (jsonResult.status === "OK") {
            this.showErrMsg("已保存");
            this.search();
            this.editing = false;
          } else {
            this.showErrMsg("保存不成功", "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    copyMenu: function (index) {
      const o = this.dataList[index];
      this.name = o.name;
      this.orderNum = o.orderNum;
      this.level = o.level;
      this.parentId = o.parentId;
      this.type = o.type;
      this.url = o.url;
      this.key = o.key;

      this.editing = true;
    },
    newMenu: function () {
      this.reset();
      this.editing = true;
    },
    createSubMenu: function (index) {
      const o = this.dataList[index];
      this.reset();
      this.level = 2;
      this.parentId = o.id;

      this.editing = true;
    },
    reset: function () {
      this.editing = false;
      this.name = "";
      this.orderNum = 0;
      this.level = 1;
      this.parentId = 0;
      this.type = "";
      this.url = "";
      this.key = "";
    },
    formatDateTime: function (val) {
      return convertLongToTimeDesc(val);
    },
    upload: function () {
      this.showLoading();

      uploadCustomMenu(
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg("已上传");
          } else {
            this.showErrMsg(v.errmsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
  },
};
</script>
